<template>
  <div class='tab'>
     <router-link tag="div" class="tab-item" to="/recommend">
        <span class="tab-link">推荐</span>
     </router-link>
     <router-link tag="div" class="tab-item" to="/singer">
        <span class="tab-link">歌手</span>
     </router-link>
     <router-link tag="div" class="tab-item" to="/rank">
        <span class="tab-link">排行</span>
     </router-link>
     <router-link tag="div" class="tab-item" to="/search">
        <span class="tab-link">搜索</span>
     </router-link>
  </div>
</template>
<script type="text/ecmascript-6">

export default {

}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
      .tab
        display: flex
        height: 44px
        line-height: 44px
        font-size :$font-size-medium
        .tab-item
          flex:1
          text-align :center
          .tab-link
            padding-bottom :5px
            color :$color-text-l
        .router-link-active
          .tab-link
            color :$color-theme
            border-bottom :2px solid $color-theme
</style>
